<template>
	<view class="page-content">
		<f-navbar title="运输订单" :navbarType="1">
			<view class="margin-right-xs" @click="goLink(`./add`)" slot="right" v-if="checkPermi(['transportOrder:page:add'])">
				<u-icon name="plus" size="30rpx" bold color="#138E57"></u-icon>
			</view>
		</f-navbar>
		<view style="display: flex; justify-content: center; background-color: #fff">
			<u-tabs :list="list2" lineWidth="50" lineColor="#138E57" @change="tabChange"></u-tabs>
		</view>

		<view class="search-block flex align-center">
			<view class="flex-sub search-input flex align-center" v-if="showSearch">
				<u-input border="none" v-model="listParams.orderCode" maxlength="20" fontSize="24rpx" placeholder="搜索"
					placeholderStyle="font-size: 24rpx;color: #CCCCCC;" confirmType="search" @confirm="searchList"
					:clearable="true" @clear="searchClear">
					<template slot="prefix">
						<u-icon name="search" color="#CCCCCC" size="40rpx"></u-icon>
					</template>
				</u-input>
			</view>
			<view class="flex-sub search-input flex align-center justify-center" @click="switchSearch(true)" v-else>
				<u-icon name="search" color="#CCCCCC" size="40rpx"></u-icon>
				<text class="margin-left-xs">搜索</text>
			</view>
			<image class="screen-icon" src="@/static/images/common/screen_icon.png" @click="showScreenModal"></image>
		</view>
		<!-- <view class=""  @click="goLink(`./add`)">
			新增
		</view>
		<view class=""  @click="goLink(`./dispatch`)">
			派单
		</view> -->
		<view class="page-content-main">
			<scrollList :list="list" :loadComplete="loadComplete" @pullUpLoad="pullUpLoad" ref="scrollList">
				<view class="order-list">
					<view v-for="item of list" :key="item.id" class="item-info" @click="goLink(`./info?id=${item.id}`)">
						<view class="item-title flex-ac flex-jb l-border-bottom">
							<view>订单号：{{ item.orderCode }}</view>
							<view>{{ orderStatusOptions[item.orderStatus].dictLabel }}</view>
						</view>

						<view class="form l-border-bottom">
							<view class="form-type flex-jb">
								<view>{{ item.startingStationName }}</view>
							</view>
							<view class="form-item" v-if="item.recyclingCompanyName">
								<view>运输公司：</view>
								<view>{{ item.recyclingCompanyName }}</view>
							</view>
							<view class="form-item">
								<view>收运油品：</view>
								<view>{{ item.oilName }}</view>
							</view>
							<view class="form-item">
								<view>油脂种类：</view>
								<view>{{ item.categoryName ? item.categoryName : "--" }}
								</view>
							</view>
							<view class="form-item">
								<view>创建时间：</view>
								<view>{{ item.createTime ? item.createTime : "--" }}
								</view>
							</view>
						</view>
						<view class="flex-je">
							<template v-if="item.orderStatus == 0">
								<view v-if="checkPermi(['transportOrder:page:dispatch'])" class="button-light"
									@click.stop="goLink(`./dispatch?select=${JSON.stringify(item)}`)">
									派单 </view>
							</template>
							<template v-if="item.orderStatus == 0">
								<view v-if="checkPermi(['transportOrder:page:cancel'])" class="button-deep"
									@click.stop="handleCancel(item.id)"> 取消 </view>
							</template>
							<template v-if="item.orderStatus > 0">
								<view v-if="checkPermi(['transportOrder:page:vehicle'])" class="button-deep" @click.stop=""> 车辆信息
								</view>
							</template>
							<template v-if="item.orderStatus == 2">
								<view v-if="checkPermi(['transportOrder:page:again'])" class="button-deep"
									@click.stop="goLink(`./add?id=${item.id}`)"> 再来一单 </view>
							</template>
						</view>
					</view>
				</view>
			</scrollList>
		</view>
		<screenModal :screenType="2" ref="screenModal" @setScreenForm="setScreenForm"
			:orderStatusOptions="orderStatusOptions"></screenModal>
	</view>
</template>
<script>
import {
	getTransportationRecordsList,
	cancelApplication
} from "@/api/transport.js";
import screenModal from "@/components/pageLayout/screenModal/screenModal.vue";
export default {
	components: {
		screenModal,
	},
	data() {
		return {
			list2: [{
				name: "全部",
				value: "",
			},
			{
				name: "待派单",
				value: 0,
			},
			{
				name: "待收运",
				value: 1,
			},
			{
				name: "收运中",
				value: 4,
			},
			{
				name: "已完成",
				value: 2,
			},
			{
				name: "已取消",
				value: 3,
			},
			],

			showSearch: false,
			listParams: {
				pageNum: 1,
				pageSize: 10,
				orderCode: null,
				orderStatus: null,
			},
			list: [],
			loadComplete: true,
			optionItem: {},
			orderStatusOptions: [],
		};
	},
	onLoad(option) {
		if (option.taskId) {
			this.listParams.taskId = option.taskId
			this.getList()
		}
	},
	onShow() {
		uni.hideTabBar();
		this.switchSearch(false);
		this.listParams.pageNum = 1;
		this.getList();
		this.getData();
	},
	methods: {
		tabChange(val) {
			console.log(val);
			this.listParams.orderStatus = val.value;
			this.searchList()
		},
		switchSearch(value) {
			this.showSearch = value;
		},
		searchList() {
			this.listParams.pageNum = 1
			this.getList()
		},
		searchClear() {
			this.listParams.orderCode = ''
			this.listParams.pageNum = 1
			this.getList()
		},
		async getData() {
			this.orderStatusOptions = await this.getDictionaryData("order_status");
		},
		getList() {
			getTransportationRecordsList(this.listParams).then((res) => {
				this.$refs.scrollList.pullUpDone(!1);
				if (this.listParams.pageNum == 1) {
					this.list = res.data.records;
					this.loadComplete = !0;
				} else {
					if (this.list.length == res.data.total) {
						this.$refs.scrollList.pullUpDone(!0);
					} else {
						this.list = [...this.list, ...res.data.records];
					}
				}
			});
		},
		pullUpLoad() {
			this.listParams.pageNum++;
			this.getList();
		},
		showScreenModal() {
			this.$refs.screenModal.showModal();
		},
		setScreenForm(form) {
			this.listParams = {
				...this.listParams,
				...form,
			};
			this.listParams.pageNum = 1;
			this.getList();
		},
		// 取消按钮操作
		handleCancel(id) {
			cancelApplication(id).then(() => {
				this.getList();
				uni.$u.toast("已取消");
			})
		},
	},
};
</script>
<style lang="scss" scoped>
.page-content {
	width: 100vw;
	overflow-x: hidden;
	height: 100vh;
	display: flex;
	flex-direction: column;

	.order-list {
		padding: 0 30rpx;
		overflow: auto;
	}

	.item-info {
		margin-bottom: 30px;
		padding: 20rpx 30rpx 30rpx 30rpx;
		background: #fff;
		border-radius: 12rpx;

		.button-light,
		.button-deep {
			border-radius: 200rpx;
			padding: 16rpx 0;
			margin: 20rpx 0 0 20rpx;
			width: 171rpx;
			text-align: center;
		}

		.button-light {
			background: #f7f7f7;
			border: 2rpx solid #138e57;
			color: #138e57;
		}

		.button-deep {
			background: linear-gradient(83deg, #48b453 0%, #2c9f79 100%);
			color: #ffffff;
		}

		.item-title {
			padding-bottom: 20rpx;

			view:nth-child(1) {
				font-size: 30rpx;
				color: #000000;
			}

			view:nth-child(2) {
				font-size: 28rpx;
			}
		}

		.form {
			padding: 30rpx 0;

			.title-tip1 {
				font-size: 24rpx;
				color: #ffbc1a;
				width: 40px;
				height: 17px;
				background: rgba(255, 186, 26, 0.2);
				padding: 0 16rpx;
				border-radius: 11px;
			}

			.title-tip2 {
				font-size: 24rpx;
				color: #138e57;
				width: 40px;
				height: 17px;
				background: rgba(19, 142, 87, 0.2);
				padding: 0 16rpx;
				border-radius: 11px;
			}

			.form-type {
				font-size: 32rpx;
				color: #000000;
			}

			.form-item {
				display: flex;
				font-size: 30rpx;
				padding-top: 16rpx;

				view:nth-child(2) {
					color: #000;
				}
			}
		}
	}

	.search-block {
		border-top: 1rpx solid #eeeeee;
		padding: 32rpx;
		background: #f7f7f7;

		.search-input {
			height: 58rpx;
			background: #ffffff;
			border-radius: 50rpx;
			font-size: 28rpx;
			color: #cccccc;
			padding: 0 20rpx;
		}

		.screen-icon {
			width: 50rpx;
			height: 50rpx;
			margin-left: 24rpx;
		}
	}

	&-main {
		position: relative;
		flex: 1;
		overflow: hidden;

		.list-block {
			padding: 0 32rpx;
		}
	}
}</style>